<!DOCTYPE html>
<html>

	<head>
		<style type="text/css">
			.tab-content>.tab-pane,
			.pill-content>.pill-pane {
				display: block;
				height: 0;
				overflow-y: hidden;
			}
			
			.tab-content>.active,
			.pill-content>.active {
				height: auto;
			}
			
			table {
				color: white;
			}
			
			#table {
				color: #000000;
			}
		</style>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>

		<!--<link rel="stylesheet" type="text/css" href="js/bootstarp-3.3.7/css/bootstrap.min.css" />-->
		<script src="js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstarp-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="js/bootstarp-table-1.11.1/bootstrap-table.min.css" />
		<script src="js/bootstarp-table-1.11.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstarp-table-1.11.1/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="assets/layui-v2.4.5/layui/css/layui.css" />
		<script src="assets/layui-v2.4.5/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-table-export.js"></script>
		<script src="js/tableExport.min.js"></script>
		<script src="js/xlsx.core.min.js"></script>
		<script src="js/FileSaver.min.js"></script>
		<script>
			$(function() { //, headers: { 'x-requested-with': 'XMLHttpRequest' }
				$.ajaxSetup({
					crossDomain: true,
					xhrFields: {
						withCredentials: true
					}
				});
			});
		</script>
	</head>

	<body>
		<br />
		<br />
		<form class="form-inline layui-form layui-form-pane">
			<div class="layui-form-item">

				<div class="layui-inline">

					<label for="exampleInputEmail2" class="layui-form-label">收费类型：</label>
					<div class="layui-input-inline">
						<select id="type_id" name="type_id">
							<option value="">全部</option>
							<option value="0">就诊</option>
							<option value="1">挂号</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label for="exampleInputEmail2" class="layui-form-label">收费形态：</label>
					<div class="layui-input-inline">
						<select id="statuss" name="statuss">
							<option value="">全部</option>
							<option value="0">未支付</option>
							<option value="1">已支付</option>
							<option value="2">确认收款</option>
							<option value="3">申请退款</option>
							<option value="4">已退款</option>
							<option value="5">部分支付</option>
							<option value="6">完成交易</option>
							<option value="7">部分退款</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">

					<div class="layui-input-inline">
						<input type="date" name="addtime" id="addtime" value="" class="layui-input" />
					</div>
				</div>
				<div class="layui-inline">

					<div class="layui-input-inline">
						<input type="date" name="adddate" id="adddate" value="" class="layui-input" />
					</div>
				</div>
				<div class="layui-inline">

					<div class="layui-input-inline">
						<button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius" onclick="select()">查询</button>
						<button type="button" id="btn_download" class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius" 
						onClick ="$('#table').tableExport({ type: 'excel', escape: 'false', fileName: '数据导出'})">导出</button>
					</div>
				</div>
			</div>
		</form>
		<br />

		<table width="100%" height="150px">
			<tr>
				<td bgcolor="#faaf19" width="20%" align="center">
					<table height="50px" width="220px">
						<tr>
							<td align="center" id="hjsr"></td>
						</tr>
						<tr>
							<td align="center">
								<hr /> 合计收入
							</td>
						</tr>
					</table>
				</td>
				<td width="3%"></td>
				<td width="77%">
					<table height="75px" width="100%" bgcolor="#47c6c6">
						<tr>
							<td rowspan="2" width="90px" align="center">收支概括</td>
							<td align="center" height="30px" width="130px" id="shofei">

							</td>
							<td align="center" height="30px" width="130px" id="tuifei">

							</td>
							<td rowspan="2"></td>
						</tr>
						<tr>
							<td align="center">
								<hr width="100px" />收费金额</td>
							<td align="center">
								<hr width="100px" />退费金额</td>
						</tr>
					</table>
					<br />
					<table height="75px" width="100%" bgcolor="#1fd273">
						<tr>
							<td rowspan="2" width="90px" align="center">收入渠道</td>
							<td align="center" height="30px" width="130px" id="xiansho">

							</td>
							<td align="center" height="30px" width="130px" id="weisho">

							</td>
							<td align="center" height="30px" width="130px" id="zhisho">

							</td>
							<td align="center" height="30px" width="130px" id="xiantui">

							</td>
							<td align="center" height="30px" width="130px" id="weitui">

							</td>
							<td align="center" height="30px" width="130px" id="zhitui">

							</td>
						</tr>
						<tr>
							<td align="center">
								<hr width="100px" />现金收入</td>
							<td align="center">
								<hr width="100px" />微信收入</td>
							<td align="center">
								<hr width="100px" />支付宝收入</td>
							<td align="center">
								<hr width="100px" />现金退款</td>
							<td align="center">
								<hr width="100px" />微信退款</td>
							<td align="center">
								<hr width="100px" />支付宝退款</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<br />

		<table>
			<tr>
				<td id="total" width="400px" height="380px"></td>
				<td id="main" width="400px" height="380px"></td>
				<td id="refund" width="400px" height="380px"></td>
			</tr>
		</table>
		<br />

		<table class="table table-bordered table-striped text-center bg-info" width="100%" id="table">

		</table>
	</body>

</html>
<script type="text/javascript">
	layui.use(['laydate', 'form'], function() {
		var form = layui.form,
			layer = layui.layer,
			laydate = layui.laydate;

		laydate.render({
			elem: '#addtime'
		});

		laydate.render({
			elem: '#adddate'
		});

	})
	var xs = 0;
	var ws = 0;
	var zs = 0;
	var xz = 0;
	var wz = 0;
	var zz = 0;
	var zsje = 0;
	var zfje = 0;
	$(function() {
		$("#table").bootstrapTable({
			url: "http://localhost:8090/Findzssz",
			queryParams: queryParams,
			columns: [{
				field: 'id',
				title: '序号',
				align: 'center'
			}, {
				field: 'type_id',
				title: '类型',
				align: 'center',
				formatter: function(value, row, index) {
						if(value == "") {
							return "全部";
						}
						if(value == "0") {
							return "就诊";
						}
						if(value == "1") {
							return "挂号";
						}
					}
				}, {
				field: 'statuss',
				title: '状态',
				align: 'center',
				formatter: function(value, row, index) {
						if(value == "") {
							return "全部";
						}
						if(value == "0") {
							return "未支付";
						}
						if(value == "1") {
							return "已支付";
						}
						if(value == "2") {
							return "确认收款";
						}
						if(value == "3") {
							return "申请退款";
						}
						if(value == "4") {
							return "已退款";
						}
						if(value == "5") {
							return "部分支付";
						}
						if(value == "6") {
							return "完成交易";
						}
						if(value == "7") {
							return "部分退款";
						}
					}
			}, {
				field: 'name',
				title: '姓名',
				align: 'center'
			}, {
				field: 'birthday',
				title: '年龄',
				align: 'center'
			}, {
				field: 'payamount',
				title: '应收金额',
				align: 'center'
			}, {
				field: 'xjzf',
				title: '现金支付',
				align: 'center'
			}, {
				field: 'wxzf',
				title: '微信支付',
				align: 'center'
			}, {
				field: 'zfbzf',
				title: '支付宝支付',
				align: 'center'
			}, {
				field: 'addtime',
				title: '日期',
				align: 'center'
			}, {
				field: 'oname',
				title: '收费员',
				align: 'center'
			}],
		})
		gzmpkg();

	})

	function queryParams() {
		return {
			'type_id': $('#type_id').val(),
			'status': $('#statuss').val(),
			'addtime': $('#addtime').val(),
			'adddate': $('#adddate').val(),
		}
	}

	function select() {
		gzmpkg();
		$('#table').bootstrapTable('refresh');

	}

	function gzmpkg() {
		$.ajax({
			type: "post",
			url: "http://localhost:8090/Findzssz",
			data: "type_id=" + $("#type_id").val() + "&&status=" + $("#statuss").val(),
			//dataType: "json",
			success: function(data) {
				xs = 0;
				ws = 0;
				zs = 0;
				xz = 0;
				wz = 0;
				zz = 0;
				zsje = 0;
				zfje = 0;
				$.each(data, function(m, n) {
					xs = xs + parseInt(n.xjzf);
					ws = ws + parseInt(n.wxzf);
					zs = zs + parseInt(n.zfbzf);
					zsje = zsje + parseInt(n.xjzf) + parseInt(n.wxzf) + parseInt(n.zfbzf);
				});
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					legend: {
						orient: 'vertical',
						x: 'left',
						data: ['现金支付', '微信支付', '支付宝支付']
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: '#235894'
								}
							}
						},
						data: [{
								value: xs,
								name: '现金支付'
							},
							{
								value: ws,
								name: '微信支付'
							},
							{
								value: zs,
								name: '支付宝支付'
							}
						],
					}]
				};
				$.ajax({
					type: "post",
					url: "http://localhost:8090/getRefund",
					data: "type_id=" + $("#type_id").val() + "&&status=" + $("#status").val(),
					dataType: "json",
					success: function(data) {
						$.each(data, function(m,n) {
							xz = xz + parseInt(n.xjtk);
							wz = wz + parseInt(n.wxtk);
							zz = zz + parseInt(n.zfbtk);
							zfje = zfje + parseInt(n.xjtk) + parseInt(n.wxtk) + parseInt(n.zfbtk);
						});

						var myChart = echarts.init(document.getElementById('refund'));
						var option = {
							legend: {
								orient: 'vertical',
								x: 'left',
								data: ['现金退款', '微信退款', '支付宝退款']
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b}: {c} ({d}%)"
							},
							series: [{
								name: '访问来源',
								type: 'pie',
								radius: ['40%', '70%'],
								avoidLabelOverlap: false,
								label: {
									normal: {
										show: false,
										position: 'center'
									}
								},
								labelLine: {
									normal: {
										lineStyle: {
											color: '#235894'
										}
									}
								},
								data: [{
										value: xz,
										name: '现金退款'
									},
									{
										value: wz,
										name: '微信退款'
									},
									{
										value: zz,
										name: '支付宝退款'
									}
								],
							}]
						};
						myChart.setOption(option);
						var my = echarts.init(document.getElementById('total'));
						var option = {
							legend: {
								orient: 'vertical',
								x: 'left',
								data: ['收费金额', '退费金额']
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b}: {c} ({d}%)"
							},
							series: [{
								name: '访问来源',
								type: 'pie',
								radius: ['40%', '70%'],
								avoidLabelOverlap: false,
								label: {
									normal: {
										show: false,
										position: 'center'
									}
								},
								labelLine: {
									normal: {
										lineStyle: {
											color: '#235894'
										}
									}
								},
								data: [{
										value: zsje,
										name: '收费金额'
									},
									{
										value: zfje,
										name: '退费金额'
									}
								],
							}]
						};
						$('#hjsr').html(zsje);
						$('#shofei').html(zsje);
						$('#tuifei').html(zfje);
						$('#xiansho').html(xs);
						$('#weisho').html(ws);
						$('#zhisho').html(zs);
						$('#xiantui').html(xz);
						$('#weitui').html(wz);
						$('#zhitui').html(zz);
						my.setOption(option);
					}
				});
				myChart.setOption(option);
			}
		});

	}
</script>